<template>
    <div>
        <el-row :gutter="20">
            <el-col :xs="18" :sm="14" :md="11" :lg="8" :xl="4">
                <el-input placeholder="搜索商品" @clear="getGoods" size="large" clearable v-model="queryInfo.query">
                    <template #append>
                        <el-button :icon="Search" @click="getGoods" />
                    </template>
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" @click="goAddpage" size="large">添加商品</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="goodsData.goods" border stripe>
                <el-table-column label="序号" type="index" width="60px" fixed align="center" />
                <el-table-column label="商品ID" prop="goods_id" align="center" sortable sort-by="goods_id" />
                <el-table-column label="商品名称" min-width="260px" prop="goods_name" align="center" />
                <el-table-column label="价格(元)" prop="goods_price" align="center" sortable sort-by="goods_price" />
                <el-table-column label="数量(个)" prop="goods_number" align="center" />
                <el-table-column label="重量(g)" prop="goods_weight" align="center" sortable sort-by="goods_weight" />
                <el-table-column label="创建时间" align="center" min-width="100px" sortable sort-by="add_time">
                    <template v-slot="data">
                        {{timeFilter(data.row.add_time, "yyyy-MM-dd")}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="130px" fixed="right" align="center">
                    <template v-slot="data">
                        <el-button type="primary" :icon="EditPen" @click="showEditDialog(data.row.goods_id)" />
                        <el-button type="danger" :icon="Delete" @click="removeGoodsById(data.row.goods_id)" />
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-config-provider :locale="zhCn">
                <el-pagination v-model:pageSize="queryInfo.pagesize" :total="goodsData.total"
                    v-model:currentPage="queryInfo.pagenum" :page-sizes="[5, 10, 15]" @current-change="getGoods"
                    @size-change="getGoods" layout="total, sizes, prev, pager, next, jumper" background />
            </el-config-provider>
        </el-row>
        <el-dialog title="编辑商品信息" v-model="editDialogVisible" width="40%">
            <el-form label-width="25%" :model="goodsInfo" :rules="rules" ref="editGoodsRef">
                <el-form-item label="商品名" prop="goods_name">
                    <el-input v-model="goodsInfo.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="goods_price">
                    <el-input v-model="goodsInfo.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="goods_number">
                    <el-input v-model="goodsInfo.goods_number" type="number"></el-input>
                </el-form-item>
                <el-form-item label="重量" prop="goods_weight">
                    <el-input v-model="goodsInfo.goods_weight"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editGoods(editGoodsRef)">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import {
        ElRow, ElCol,
        ElInput, ElButton,
        ElTable, ElTableColumn,
        ElPagination,
        ElConfigProvider, 
        ElDialog, ElMessage, ElMessageBox,
        ElForm, ElFormItem
    } from "element-plus"
    import {
        EditPen,
        Delete,
        Search
    } from '@element-plus/icons-vue'
    import {
        getGoodList,
        getGoodsInfo,
        putGoodsInfo,
        deleteGoods
    } from "@/tools/ajax.js"
    import zhCn from 'element-plus/lib/locale/lang/zh-cn' 
    import { reactive, ref } from "vue"
    import { useRouter } from "vue-router"
    import { useStore } from "vuex"
    import { useRules, timeFilter } from "@/tools/utils"
    const goodsData = reactive({}) 
    const queryInfo = reactive({
        query: "",   
        pagenum: 1,  
        pagesize: 10 
    })
    async function getGoods() {
        const res = await getGoodList(queryInfo)
        console.log(res);
        if (res.meta.status != 200) {
            return ElMessage.error(res.meta.msg);
        }
        ElMessage.success(res.meta.msg);
        goodsData.total = res.data.total;
        goodsData.goods = res.data.goods;
    }
    getGoods()
    const router = useRouter()
    const store = useStore()
    function goAddpage() {
        router.push("/goods/add")
        store.commit('setPath', {
            path: "/goods",
            name1: "商品管理",
            name2: "添加商品"
        })
    }
    const editDialogVisible = ref(false) 
    const goodsInfo = ref({}) 
    const editGoodsRef = reactive(null)
    const { 
        goodsNameRule, 
        goodsPriceRule, 
        goodsNumberRule, 
        goodsWeightRule
    } = useRules()  
    const rules = {
        goods_name: goodsNameRule,
        goods_price: goodsPriceRule,
        goods_number: goodsNumberRule,
        goods_weight: goodsWeightRule
    }
    async function showEditDialog(id) {  
        const res = await getGoodsInfo({id})
        console.log(res);
        if (res.meta.status != 200) return ElMessage.error(res.msg); 
        goodsInfo.value = res.data
        editDialogVisible.value = true
    }
    function editGoods(form){ 
        console.log(form);
        form.validate(async bool => {
            if (!bool) return ElMessage.warning("输入有误");
            console.log(goodsInfo.value);
            const { meta: res } = await putGoodsInfo(goodsInfo.value)
            console.log(res);
            if (res.status != 200) return ElMessage.error(res.msg);
            ElMessage.success("商品信息已更新");
            editDialogVisible.value = false;
            getGoods()  
        })
    }
    async function removeGoodsById(id) { 
        const confirmRusult = await ElMessageBox.confirm('此操作将永久删除此商品, 是否继续?', '永久删除该商品', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).catch(err => err)
        if (confirmRusult !== 'confirm') {
            return ElMessage.info('已经取消了删除')
        }
        const res = await deleteGoods({ id })
        if (res.meta.status !== 200) {
            return ElMessage.error(res.meta.msg)
        }
        ElMessage.success(res.meta.msg)
        this.getGoods()
    }
    // #endregion
</script>
<style scoped lang="scss">
    .el-table {
        margin-top: 15px;
        width: 100%;
        height: calc(100vh - 286px);
    }

    .el-pagination {
        margin-top: 15px;
    }
    .el-dialog .el-input{
        width: 80%;
    }
</style>